<template>
  <div class="flex-1 h-full card_class">
    <div class="card_title">
      <span>{{ title }}</span>
      <div>
        <el-select
          v-model="searchParam.year"
          placeholder="请选择"
          filterable
          :suffixIcon="() => '年'"
          class="w-[70px] mr-[10px]"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('YearList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="searchParam.month"
          placeholder="请选择"
          filterable
          :suffixIcon="() => '月'"
          class="w-[50px]"
          :class="!panelSetIcon ? 'mr-[20px]' : ''"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('MonthList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="flex items-center h-[10%] justify-center">
      <el-radio-group
        v-model="radio"
        size="small"
        fill="#006DFB"
        class="ml-[10px]"
        @change="handleSearch"
      >
        <el-radio-button
          v-for="item in selectOption"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div
      class="echarts"
      style="height: calc(100% - 50px - 10%)"
      v-loading="loading"
      element-loading-background="transparent"
    >
      <ECharts
        v-if="option"
        :option="option"
        :id="`ProductionMixAnalysis` + props.id"
        ref="chart"
      />
    </div>
    <!-- <deviceManage-pie
      :id="`ProductionMixAnalysis` + props.id"
      :key="`ProductionMixAnalysis` + props.id"
      :params="reportData ?? []"
      style="height: calc(100% - 50px - 10%)"
    /> -->
    <!-- 钻取工单详情 -->
    <!-- <deviceManage-work-order ref="DeviceWorkOrderRef">
    </deviceManage-work-order> -->
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { useRoute } from "vue-router";
import ECharts from "@/components/ECharts/index.vue";
import * as echarts from "echarts/core";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url, title } = toRefs(props);
const radio = ref("1");
const selectOption = [
  {
    label: "重量",
    value: "1",
  },
  {
    label: "数量",
    value: "2",
  },
];

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const reportData = ref();

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
  // year: "2025",
  // month: "3",
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

async function handleSearch() {
  reportData.value = null;
  loading.value = true;
  Object.assign(searchedParam, searchParam);
  const { data } = await request({
    url: `/mes/mesplanstatistics/planViewProductStructureAnalysis`,
    method: "post",
    data: {
      statisticsYear: searchParam.year,
      statisticsMoon: searchParam.month,
      statisticsState: radio.value,
    },
  }).finally(() => {
    loading.value = false;
  });

  reportData.value = data.data;
  setOptions();
}
//职称结构图表
const colorList = [
  "#006DFB",
  "#18dcff",
  "#313ca9",
  "#B4EC51",
  "#7d5fff",
  "#FFBC6D",
  "#51D9A2",
  "#f9e264",
  "#f47a75",
  "grey",
  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: "#04B9BD",
    },
    {
      offset: 1,
      color: "#76F2F8",
    },
  ]),
  "#765025",
];
const rich: any = {
  name: {
    color: isDarkMode(routeName) ? "#eeeeee" : "#666",
    fontSize: 13,
    // padding: [8, 30, 0, 30],
    fontWeight: "600",
    align: "left",
  },
  value: {
    color: "#333",
    fontSize: 14,
    padding: [0, 30, 8, 30],
    fontWeight: "500",
    align: "left",
  },
  percent: {
    color: "#FFF",
    align: "right",
    fontSize: 14,
    fontWeight: "400",
    //padding: [0, 5]
  },
};
const loading = ref(false);
const option = ref();
const chart = ref();
function setOptions() {
  option.value = {
    color: colorList,
    title: {
      show: true,
      text: "",
      top: 15,
      left: "center",
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
    },
    series: [
      {
        itemStyle: {
          color: function (params) {
            return colorList[params?.dataIndex];
          },
        },
        type: "pie",
        radius: ["0%", "60%"],
        center: ["50%", "48%"],
        // label: {
        //   show: true,
        //   position: "inner",
        //   formatter: (params: any) => {
        //     return "{percent|" + params.percent.toFixed(0) + "%}";
        //   },
        //   rich: rich,
        // },
        label: {
          show: true,
          position: "outside",
          formatter: "{b}\n{name|{c}}",
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: isDarkMode(routeName) ? 13 : 12,
          lineHeight: 16,
          rich: rich,
        },
        labelLine: {
          length: 20,
          length2: 10,
          lineStyle: {
            width: 1,
          },
        },
        data: reportData.value,
      },
      {
        itemStyle: {
          color: isDarkMode(routeName) ? "" : "#F2F9F7",
          opacity: isDarkMode(routeName) ? "0.3" : "1",
        },
        type: "pie",
        silent: true, // 取消高亮
        radius: ["0%", "65%"],
        center: ["50%", "48%"],
        data: reportData.value,
        label: {
          show: false,
          position: "inner",
          formatter: (params: any) => {
            return "{percent|" + params.percent.toFixed(0) + "%}";
          },
          // rich: rich,
        },
        z: -1,
      },
    ],
  };
}
onMounted(() => {
  handleSearch();
  window.addEventListener("session-storage-updated", onSessionStorageChange);
});

onBeforeUnmount(() => {
  window.removeEventListener("session-storage-updated", onSessionStorageChange);
});

function onSessionStorageChange(event: any) {
  if (event.key === "month") {
    searchParam.month = JSON.parse(sessionStorage.getItem("month"));
    handleSearch();
  }
  if (event.key === "year") {
    searchParam.year = JSON.parse(sessionStorage.getItem("year"));
    handleSearch();
  }
}
</script>

<style lang="scss" scoped>
.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
